<template>
  <div class="form">
    <el-form ref="form" :model="form" :rules="formRules" label-position="top">
      <v-box>
        <span slot="title">新增办件</span>
        <div slot="content">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="办件编号" prop="projectNum">
                <el-input v-model="form.projectNum" autofocus="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开发商" prop="developer">
                <el-select v-model="form.developer">
                  <el-option value="碧桂园" label="碧桂园"/>
                  <el-option value="滨江" label="滨江"/>
                  <el-option value="大城" label="大城"/>
                  <el-option value="大发" label="大发"/>
                  <el-option value="德信" label="德信"/>
                  <el-option value="多弗" label="多弗"/>
                  <el-option value="富力" label="富力"/>
                  <el-option value="鸿地" label="鸿地"/>
                  <el-option value="华鸿" label="华鸿"/>
                  <el-option value="华润" label="华润"/>
                  <el-option value="金茂" label="金茂"/>
                  <el-option value="蓝光" label="蓝光"/>
                  <el-option value="龙湖" label="龙湖"/>
                  <el-option value="绿城" label="绿城"/>
                  <el-option value="绿地" label="绿地"/>
                  <el-option value="融创" label="融创"/>
                  <el-option value="万科" label="万科"/>
                  <el-option value="新城" label="新城"/>
                  <el-option value="新希望" label="新希望"/>
                  <el-option value="旭辉" label="旭辉"/>
                  <el-option value="阳光100" label="阳光100"/>
                  <el-option value="阳光城" label="阳光城"/>
                  <el-option value="远洋" label="远洋"/>
                  <el-option value="中梁" label="中梁"/>
                  <el-option value="中南" label="中南"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="楼盘" prop="building">
                <el-input v-model="form.building " autofocus="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="坐落" prop="address">
                <el-input v-model="form.address " autofocus="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="户主姓名" prop="householderName">
                <el-input v-model="form.householderName" autofocus="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机" prop="tel">
                <el-input v-model="form.tel " autofocus="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证" prop="identityNum">
                <el-input v-model="form.identityNum" autofocus="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否加急" prop="isUrgent">
                <el-checkbox v-model="form.isUrgent">加急</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="办理进度" prop="managentProgress">
                <el-select v-model="form.managentProgress">
                  <el-option value="缴纳契税" label="缴纳契税"/>
                  <el-option value="递件办证" label="递件办证"/>
                  <el-option value="权证领取" label="权证领取"/>
                  <el-option value="受理抵押" label="受理抵押"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="款项进度" prop="paymentProgress">
                <el-select v-model="form.paymentProgress">
                  <el-option value="全款完结" label="全款完结"/>
                  <el-option value="贷款完结" label="贷款完结"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="交付进度" prop="deliveryProgress">
                <el-select v-model="form.deliveryProgress">
                  <el-option value="通知客户" label="通知客户"/>
                  <el-option value="交付客户" label="交付客户"/>
                  <el-option value="回执房开" label="回执房开"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item class="form-foot">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </v-box>
    </el-form>
  </div>
</template>

<script>
import box from '@/components/Base/Box'
import { mapGetters } from 'vuex'
import { updateProjectInfo } from '@/api/project'

export default {
  components: {
    'v-box': box
  },
  data() {
    return {
      form: {
        projectNum: '', // 办件编号
        developer: '', // 开发商
        building: '', // 楼盘
        householderName: '', // 户主姓名
        address: '', // 坐落
        tel: '', // 手机
        identityNum: '', // 身份证
        isUrgent: false, // 是否加急
        managentProgress: '', // 办理进度
        paymentProgress: '', // 款项进度
        deliveryProgress: '' // 交付进度
      },
      formRules: {
        projectNum: [
          { required: true, message: '请输入办件编号', trigger: 'blur' }
        ],
        developer: [
          { required: true, message: '请输入开发商', trigger: 'blur' }
        ],
        building: [
          { required: true, message: '请输入楼盘', trigger: 'blur' }
        ],
        householderName: [
          { required: true, message: '请输入户主姓名', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(that.form)
          updateProjectInfo(that.form).then(response => {
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '办件保存成功!'
              })
              this.$refs['form'].resetFields()
            } else {
              this.$message({
                type: 'error',
                message: '办件保存失败!'
              })
            }
          })
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style scoped less="scss">
.form{
  width: 1024px;
  margin: 15px auto;
  background: #ffffff;
  padding: 15px;
  border-radius: 5px;
}
.form-foot{
  text-align: right;
  /*background: #eee;*/
  padding: 10px 10px;
}
</style>
